<template>
  <div class="main">
    <fundation-header />
    <div class="mainpage">
      <div class="resultImg">
        <img src="../../assets/img/Fundation/buySuccess.png" alt="结果显示图片">
        <p>购买成功</p>
      </div>
      <group class="cellGroup" gutter='0'>
        <cell title="产品名称" :value="orderResult.orderName" />
        <cell title="购买金额" :value='orderResult.orderCost+"元"' />
      </group>
      <div class="btnDiv">
      <flexbox  :gutter="25">
         <flexbox-item><x-button plain type="warn" @click.native="myFundation">我的基金</x-button></flexbox-item>
         <flexbox-item> <x-button  type="warn" @click.native="continueBuy">继续购买</x-button></flexbox-item>
      </flexbox>
      </div>
    </div>
  </div>
</template>

<script>
import FundationHeader from './fundationHeader'

export default {
  name: 'fundationResult',
  components: {
    FundationHeader
  },
  data () {
    return {
      orderResult: {
        isSuccess: true, // 订单结果
        orderCost: '500000', // 购买金额
        orderName: '国泰民安增利债券型发起式C' // 产品名称
      }
    }
  },

  methods: {
    myFundation () {
      console.log('跳转我的基金')
    },
    continueBuy () {
      console.log('跳转继续购买')
    }
  }
}
</script>
<style lang="less" scoped>
    .main{
      background: #ffffff;
    }
    .cellGroup .weui-cell::before{
      border-top: 0px;
    }
    .resultImg{
      height: 3.36rem;
      text-align: center;
      padding-top: 0.81rem;
      img{
        width: 1.08rem;
        height: 1.08rem;
      }
      p{
        padding-top: 0.52rem;
        font-size:0.3rem;
        font-family:PingFangSC-Medium;
        color:rgba(51,51,51,1);
        line-height: 0.3rem;
      }
    }
    .weui-cell {
      padding: 0rem 0.3rem;
      font-size: 0.28rem;
      line-height: 0.28rem;
      &:last-child{
        padding-bottom:0.4rem;
      }
      &:first-child{
        padding-top: 0.46rem;
        padding-bottom: 0.3rem;
      }
    }
    button{
      border: 1px solid rgba(236,27,48,1);
    }
    .btnDiv{
      padding: 1.14rem 0.5rem 0 0.5rem;
    }

</style>
